<script setup lang="ts">

import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { ScanDir } from '../model/model';
import { CoffeeOutlined } from '@ant-design/icons-vue';
import Introduce from './Introduce.vue';
import { open } from '@tauri-apps/api/dialog';

const props = defineProps({
    loading: Boolean,
});

const emit = defineEmits<{
    (e: 'startScan', dirData: string[]): void
}>()

const showHelpView = ref(false);
// 输入框内容
const inputValue = ref<string>('');
// 要扫描的目录
const dirData = ref<string[]>([]);

const showHelp = () => {
    showHelpView.value = true;
}

const onKeypress = (event: any) => {
    if (event.key == 'Enter') {
        addDir();
    }
}

const addDir = async () => {
    if (props.loading) {
        message.error('正在扫描中，暂时不能添加');
        return;
    }
    const selected: null | string | string[] = await open({
        multiple: true,
        directory: true,
    });
    console.log(selected);
    if (Array.isArray(selected)) {
        console.log("array");
        selected.forEach(element => {
            dirData.value.push(element);
        });
    } else if (selected === null) {
        console.log("没有选择");
    } else {
        console.log("single");
        dirData.value.push(selected);
    }

}

const startScan = () => {
    emit('startScan', dirData.value);
}

const delDirItem = (delDir: string) => {
    if (props.loading) {
        message.error('正在扫描中，暂时不能删除');
        return;
    }
    dirData.value = dirData.value.filter(i => i != delDir);
}

</script>

<template>
    <a-row class="inputBar" type="flex" justify="start">
        <a-col flex="100px">
            <a-button type="text" @click="showHelp">
                <coffee-outlined style="font-size: 22px;" />
            </a-button>
        </a-col>
        <a-col v-if="dirData.length > 0" flex="auto">
            <a-list class="dirList" bordered item-layout="horizontal" :data-source="dirData">
                <template #renderItem="{ item }">
                    <a-list-item>
                        <template #actions>
                            <a key="list-item-del" @click="delDirItem(item)">删除</a>
                        </template>
                        <a-list-item-meta>
                            <template #title>
                                {{ item }}
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>
            </a-list>
        </a-col>
        <a-col flex="300px">
            <a-button class="addBtn" type="primary" size="large" @click="addDir" :disabled="loading">添加目录
            </a-button>

            <a-button class="scanBtn" type="primary" size="large" @click="startScan"
                :disabled="dirData.length == 0">
                {{ loading ? '停止扫描' : '开始扫描' }}
            </a-button>
        </a-col>
    </a-row>


    <a-modal v-model:visible="showHelpView" width="50%" :footer="null">
        <Introduce />
    </a-modal>
</template>

<style scoped>
.inputBar {
    margin-top: 30px;
    margin-bottom: 20px;
}

.addBtn {
    margin-left: 15px;
}

.scanBtn {
    margin-left: 15px;
}

</style>